<template>
  <Layout :class="'bg-white p-2'">
    <Row :class="'m-1'">
      <Col span="4">
        <Button class="m-2" type="error" @click="newUser">新增</Button>
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchKey"
          placeholder="请输入检索账号"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchTel"
          placeholder="请输入检索电话"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchSec"
          placeholder="请输入检索身份证号"
        />
      </Col>
      <Col span="4">
        <Button
          class="m-2"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row.userId)"
            >详细</Button
          >
          <Button type="error" size="small" @click="remove(row.userId)"
            >删除</Button
          >
        </template>
      </Table>

      <!--页面条数 pageSize-->
      <!--    <Col span="4">
        每页条数:<Input
          :class="'w-75 m-2'"
          v-model="tableInfo.pageSize"
          placeholder="请输入页码条数"
        />
      </Col> -->

      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="tableInfo.size"
        @on-change="pageSearch"
        :total="tableInfo.total"
        :current="tableInfo.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      searchKey: '',
      searchTel: '',
      searchSec: '',
      tableInfo: {
        currentPage: 1, //默认第一页
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '#',
            width: 80,
            fixed: 'left',
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index +
                  (self.tableInfo.currentPage - 1) * self.tableInfo.size +
                  1
              )
            },
          },
          {
            title: '账户',
            key: 'account',
            width: 200,
          },
          {
            title: '电话',
            key: 'tel',
            width: 150,
          },
          {
            title: '微信OPENID',
            key: 'openId',
            width: 150,
          },
          {
            title: '身份证号',
            key: 'secId',
            width: 200,
          },
          {
            title: '操作',
            slot: 'action',
          },
        ],
        data: [],
      },
    }
  },
  methods: {
    newUser: function() {
      this.$router.push({
        name: 'user_new',
      })
    },
    show: function(userId) {
      this.$router.push({
        name: 'user_detail',
        params: {
          userId,
        },
      })
    },
    remove: function(userId) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除用户，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: '/user/info',
              param: {
                userId,
              },
            })
            .then((data) => {
              this.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    search: function() {
      //查询  目前还没有按照条件查询  点击查询即为全查询
      // this.$data.tableInfo.currentPage = 1
      //    var searchPOJO = {
      //      page:  this.$data.tableInfo.currentPage,
      //      size: this.$data.tableInfo.pageSize,
      //    }
      //    this.http
      //      .get({
      //        url: '/user/list/',
      //        param: searchPOJO,
      //      })
      //      .then((data) => {
      //        this.$data.tableInfo.currentPage = data.page
      //        this.$data.tableInfo.total = data.totalCount
      //        this.$data.tableInfo.pageSize = data.size
      //        this.$data.tableInfo.data = data.userList
      //      })
    },
    changeSize: function(changeSize) {
      this.$data.tableInfo.size = changeSize
    },
    pageSearch: function(changedPage) {
      //切换页面
	this.$data.tableInfo.currentPage=changedPage;
      var pageSearchPOJO = {
        page: this.$data.tableInfo.currentPage,
        size: this.$data.tableInfo.size,
      }
      this.http
        .get({
          url: '/user/list/',
          param: pageSearchPOJO,
        })
        .then((data) => {
          this.$data.tableInfo.currentPage = data.page
          this.$data.tableInfo.total = data.totalCount
          this.$data.tableInfo.size = data.size
          this.$data.tableInfo.pageSize = data.totalPage
          this.$data.tableInfo.data = data.userList
        })
    },
  },
  created: function() {
    this.$data.tableInfo.currentPage = 1
    var createdPOJO = {
      page: this.$data.tableInfo.currentPage,
      size: this.$data.tableInfo.size,
    }
    this.http
      .get({
        url: '/user/list/',
        param: createdPOJO,
      })
      .then((data) => {
        this.$data.tableInfo.currentPage = data.page
        this.$data.tableInfo.total = data.totalCount
        this.$data.tableInfo.size = data.size
        this.$data.tableInfo.pageSize = data.totalPage //一共多少页
        this.$data.tableInfo.data = data.userList
      })
  },
}
</script>

<style></style>
